<!-- 项目 -->
 
<template>
	<div class="container">
		<!-- 侧边栏 -->
		<div class="sidebar">
			<div 
			@click="handleOpen"
			class="custom-btn">新建项目</div>
			<div 
			@click="handleOpenFile"
			class="custom-btn">打开项目</div>
			<div 
			v-if="project"
			class="sidebar-main">
				<div class="custom-input border">
					<div class="input">{{project['name']}}</div>
					<div 
					class="icon"
					@click="handleEdit()"
					>
						<el-icon><Edit /></el-icon>
					</div>
				</div>
				<div class="main-cont">
					<div class="info">
						<div 
							class="info-circle"
							:style="{ backgroundColor: currentMethodConfig?.color || '#409EFF' }"
							v-if="currentMethodConfig"
						>
							{{ currentMethodConfig.icon || '📊' }}
						</div>
						<div class="info-circle" v-else></div>
						<div class="info-cont">
							<div class="title">
								{{ currentMethodConfig?.title || project['instance']?.title }}
							</div>
							<div class="text">
								{{ currentMethodConfig?.description || project['instance']?.description }}
							</div>
						</div>
						<div class="more" @click="handleShowDeleteDialog">
							<el-icon><More /></el-icon>
						</div>
					</div>
					<div class="card-box">
						<div class="custom-input">
							<div class="input">{{project['description']}}</div>
							<div 
							@click="handleEdit()"
							class="icon">
								<el-icon><Edit /></el-icon>
							</div>
						</div>
						<div class="custom-item">
							<div class="label">项目文件：</div>
							<div 
								class="text clickable-path" 
								@click="handleOpenFolder(project['path'])"
								:title="'点击打开文件夹: ' + project['path']"
							>
								{{project['path']}}
							</div>
						</div>
						<div class="custom-item">
							<div class="label">标签类别：</div>
							<div 
							v-for="(label,index) in project['types']"
							:key="index"
							class="text">{{ index }}: {{ label }}</div>
						</div>
						<div class="custom-item">
							<div class="label">标签实例/图像：</div>
							<div class="text">{{project['tags']?.length}}/{{project['images']?.length}}</div>
						</div>
						<div class="custom-item">
							<div class="label">创建时间/修改时间：</div>
							<div class="text">
								{{ formatDate(project['createdAt']) }}/{{ formatDate(project['updatedAt']) }}
							</div>
						</div>
						<div class="custom-item">
							<div class="label">程序版本/文件版本：</div>
							<div class="text">{{project['version']['program']}}/{{project['version']['file']}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 主内容区域 -->
		<div class="content">
			<div class="card-header">
				最近的项目：
			</div>
			<div 
			class="cell-box">
				<el-tooltip 
				v-for="(item,index) in projectList"
				:key="index"
				placement="bottom">
					<template #content>
						<div class="custom-tip-body">
							<div class="title">{{item['name']}}</div>
							<div class="text">方法：{{item['method']}}</div>
							<div class="text">路径：{{ item['path'] }}</div>
							<div class="text">修改时间: {{formatDate(item['updatedAt'])}}</div>
						</div>
					</template>
					<div 
					@click.stop="handleChangeProject(item)"
					@dblclick.stop="handleDetail(item)"
					class="cell"
					:class="{ 
						active: project && item['id'] == project['id'],
						removed: item['status'] === 'removed' || !item['exists']
					}"
					>
						<div class="cell-img">
							<img
							class="img"
							v-if="item['images'] && item['images'].length && item['status'] !== 'removed'"
							:src="item['images'][0]['image']"
							></img>
							<div 
							v-else-if="item['status'] === 'removed' || !item['exists']"
							class="removed-placeholder"
							>
								📁❌
							</div>
							<div 
							v-else
							class="empty-placeholder"
							>
								📁
							</div>
						</div>
						<div class="cell-title">{{item['name']}}</div>
					</div>
				</el-tooltip>
			</div>
		</div>
		<!-- 新建项目模态框 -->
		<el-dialog
		    v-model="visible"
		    title="创建新项目"
			top="7vh"
		    width="980"
		  >
			<el-form 
			:model="form" 
			:rules="Rules"
			ref="formRef"
			label-position="top"
			>
				<el-form-item 
				label="从Json数据集创建项目（可选）">
					<div class="card-cell-box">
						<div class="cell-box">
							<div 
							v-for="(item,index) in dataList"
							:key="index"
							class="cell custom-item"
							:class="{active: form['dataInfo'] && form['dataInfo']['id'] == item['id']}"
							@click="handleTabData(item)"
							>
								<div 
									class="method-icon"
									:style="{ backgroundColor: item.color || '#909399' }"
								>
									{{ item.icon || '📁' }}
								</div>
								<div class="cell-cont">
									<div class="c-title">{{ item.title || '导入数据集' }}</div>
								</div>
							</div>
						</div>
						<div class="cell-main">
							<div class="text" v-if="form['dataInfo']">
								{{ form['dataInfo']['content'] || '从现有json数据集创建项目。数据集定义支持的json方法。' }}
							</div>
							<div class="text" v-else>
								从现有json数据集创建项目。数据集定义支持的json方法。
							</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item
				label="深度学习方法">
					<div class="card-cell-box">
						<div class="cell-box">
							<div 
							v-for="(item,index) in instanceList"
							:key="index"
							class="cell"
							:class="{active: form['instance'] && form['instance']['id'] == item['id']}"
							@click="handleTabInstance(item)"
							>
								<div 
									class="method-icon"
									:style="{ backgroundColor: item.color || '#409EFF' }"
								>
									{{ item.icon || '📊' }}
								</div>
								<div class="cell-cont">
									<div class="c-title">{{item['title']}}</div>
									<div class="c-text">{{item['description']}}</div>
								</div>
							</div>
						</div>
						<div class="cell-main">
							<div class="title" v-if="form['instance']">{{form['instance']['title']}}</div>
							<div 
							class="text" 
							v-if="form['instance']"
							v-html="form['instance']['content']"
							>
							</div>
						</div>
					</div>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item
						label="项目名称"
						prop="name"
						>
							<el-input v-model="form['name']" class="input" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
						label="项目文件路径"
						prop="path"
						>
							<div class="flex-row">
								<el-input v-model="form['path']" class="input" placeholder="请输入" readonly></el-input>
								<el-button type="primary" @click="handleChangeFile">预览</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<div class="flex-row" style="justify-content: flex-end;">
						<el-checkbox
						v-model="form['savePath']" 
						label="设置一个用户自定义的随机种子" />
					</div>
				</el-form-item>
				<el-form-item
				label="项目说明"
				prop="description"
				>
					<div class="flex-row">
						<el-input v-model="form['description']" class="input" placeholder="请输入"></el-input>
						<el-button plain @click="handleCancel">取消</el-button>
						<el-button type="primary" @click="handleCreate">
							{{form['id'] ? '保存' : '创建项目'}}
						</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 删除项目确认弹窗 -->
		<el-dialog
		    v-model="deleteDialogVisible"
		    title="删除项目"
		    width="400px"
		    :before-close="handleCancelDelete"
		  >
			<div style="text-align: center; padding: 20px 0;">
				<p style="font-size: 16px; margin-bottom: 10px; color: #333;">
					确定要删除项目吗？
				</p>
				<p style="font-size: 14px; color: #666; margin-bottom: 20px;">
					项目名称：{{ project?.name }}
				</p>
				<p style="font-size: 12px; color: #999;">
					此操作将永久删除项目文件夹及所有内容，无法恢复！
				</p>
			</div>
			<template #footer>
				<div style="text-align: center;">
					<el-button @click="handleCancelDelete">取消</el-button>
					<el-button type="danger" @click="handleConfirmDelete" :loading="deleteLoading">
						确认删除
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import { useProjectStore } from '@store';
	const projectStore = useProjectStore();
	const router = useRouter()

	// 响应式数据
	const project = computed(() => projectStore.getProject)
	const projectList = computed(() => projectStore.getProjects)
	
	// 获取当前项目对应的方法配置
	const currentMethodConfig = computed(() => {
		if (!project.value?.instance?.id || !instanceList.value.length) {
			return null
		}
		return instanceList.value.find(method => method.id === project.value.instance.id)
	})
	const visible = ref(false)
	const deleteDialogVisible = ref(false)
	const deleteLoading = ref(false)
	const dForm = {
		name: '',
		description: '',
		dataInfo: null,
		instance: null,
		path: '',
		savePath: true
	}
	const form = ref({ ...dForm })
	const Rules = {
		name: [
			{ required: true, message: '请输入项目名称', trigger: 'blur' }
		],
		path: [
			{ required: true, message: '请选择项目文件路径', trigger: 'change' }
		],
		description: [
			{ required: true, message: '请输入项目说明', trigger: 'blur' }
		]
	}
	const dataList = ref([])
	const instanceList = ref([])
	const handleTabData = (item) => {
		// 创建纯JavaScript对象副本以避免响应式代理问题
		form.value['dataInfo'] = JSON.parse(JSON.stringify(item))
	}
	const handleTabInstance = (item) => {
		// 创建纯JavaScript对象副本以避免响应式代理问题
		form.value['instance'] = JSON.parse(JSON.stringify(item))
	}
	
	const handleChangeProject = (item) => {
		if (item.status === 'removed' || !item.exists) {
			// 项目已移除，询问是否从列表中删除
			if (confirm(`项目 "${item.name}" 已被移除或不存在\n路径: ${item.path}\n\n是否从最近项目列表中删除？`)) {
				handleDeleteRemovedProject(item.path)
			}
			return
		}
		projectStore.setProject(item)
	}
	const handleDetail = async (item) => {
		if (item.status === 'removed' || !item.exists) {
			// 项目已移除，询问是否从列表中删除
			if (confirm(`项目 "${item.name}" 已被移除或不存在\n路径: ${item.path}\n\n是否从最近项目列表中删除？`)) {
				handleDeleteRemovedProject(item.path)
			}
			return
		}
		
		try {
			// 加载完整的项目配置数据，而不是使用recent-projects中的简化数据
			await projectStore.loadProject(item.path)
			router.push('gallery')
		} catch (error) {
			console.error('加载项目详情失败:', error)
			alert('加载项目详情失败: ' + error.message)
		}
	}

	const handleOpen = () => {
		// 重置表单并设置默认选择
		form.value = { ...dForm }
		
		// 默认选中第一个深度学习方法
		if (instanceList.value.length > 0) {
			form.value['instance'] = JSON.parse(JSON.stringify(instanceList.value[0]))
		}
		
		visible.value = true
	}

	const handleOpenFile = async () => {
		// 调用electron API打开文件选择器
		if (window.electronAPI && window.electronAPI.openFileDialog) {
			try {
				const filePaths = await window.electronAPI.openFileDialog([{
					name: 'Project Files',
					extensions: ['json']
				}])
				
				if (filePaths && filePaths.length > 0) {
					// 加载项目文件 - 处理project.json文件路径
					let projectPath = filePaths[0]
					if (projectPath.endsWith('project.json')) {
						projectPath = projectPath.replace('project.json', '').replace(/\/$/, '')
					}
					console.log('[Dashboard] 加载项目路径:', projectPath)
					
					// 检查项目是否已存在于最近项目列表中
					const existingProject = projectList.value.find(p => p.path === projectPath)
					
					await projectStore.loadProject(projectPath)
					// 刷新项目列表
					await projectStore.loadRecentProjects()
					
					// 给用户提示
					if (existingProject) {
						alert(`项目已存在于最近项目列表中，已更新到列表顶部\n项目名称: ${existingProject.name}`)
					} else {
						alert('项目导入成功，已添加到最近项目列表')
					}
				}
			} catch (error) {
				console.error('加载项目失败:', error)
				alert('加载项目失败: ' + error.message)
			}
		}
	}
	const handleEdit = () => {
		// 只复制表单需要的字段，避免复制复杂对象导致问题
		form.value = {
			id: project.value.id,
			name: project.value.name,
			description: project.value.description,
			path: project.value.path,
			instance: project.value.instance ? JSON.parse(JSON.stringify(project.value.instance)) : null,
			dataInfo: project.value.dataInfo ? JSON.parse(JSON.stringify(project.value.dataInfo)) : null,
			savePath: project.value.savePath || true
		}
		visible.value = true
	}
	const handleChangeFile = async () => {
		// 调用electron API选择路径
		if (window.electronAPI && window.electronAPI.selectDirectory) {
			try {
				const path = await window.electronAPI.selectDirectory('选择项目保存位置')
				if (path) {
					form.value['path'] = path
					// 设置为工作目录
					await projectStore.setWorkspaceDir(path)
				}
			} catch (error) {
				console.error('选择目录失败:', error)
			}
		}
	}
	const formRef = ref()
	const handleCancel = () => {
		visible.value = false
		form.value = { ...dForm }
		
		// 重置时也要设置默认选择
		if (instanceList.value.length > 0) {
			form.value['instance'] = JSON.parse(JSON.stringify(instanceList.value[0]))
		}
		
		formRef.value?.resetFields()
	}
	const handleCreate = async () => {
		formRef.value?.validate(async (valid, fields) => {
			if (valid) {
				try {
					if (form.value['id']) {
						// 编辑现有项目 - 完全序列化以避免响应式代理问题
						const cleanFormData = JSON.parse(JSON.stringify(form.value))
						const cleanCurrentProject = JSON.parse(JSON.stringify(project.value))
						
						const editedProject = {
							...cleanCurrentProject,
							name: cleanFormData.name,
							description: cleanFormData.description,
							instance: cleanFormData.instance,
							dataInfo: cleanFormData.dataInfo,
							updatedAt: new Date().toISOString()
						}
						
						// 确保project子对象存在
						if (editedProject.project) {
							editedProject.project.name = cleanFormData.name
							editedProject.project.description = cleanFormData.description
							editedProject.project.updated_at = new Date().toISOString()
						}
						
						projectStore.setProject(editedProject)
						await projectStore.saveProject()
						
						// 重新加载最近项目列表以更新UI
						await projectStore.loadRecentProjects()
					} else {
						// 创建新项目 - 先确保工作目录已设置
						if (!form.value.path) {
							throw new Error('请选择项目保存路径')
						}
						
						// 设置工作目录
						await projectStore.setWorkspaceDir(form.value.path)
						
						// 序列化对象以避免IPC克隆问题
						const projectData = JSON.parse(JSON.stringify(form.value))
						const result = await projectStore.createProject(projectData)
						
						// 项目创建成功后跳转到图库页面
						if (result.success) {
							handleCancel()
							router.push('gallery')
						}
					}
				} catch (error) {
					console.error('项目操作失败:', error)
					alert('项目操作失败: ' + error.message)
				}
			}
		})
	}


	const formatDate = (dateString) => {
		return new Date(dateString).toLocaleString('zh-CN')
	}

	const handleOpenFolder = async (folderPath) => {
		if (!folderPath) {
			alert('项目路径不存在')
			return
		}
		
		try {
			if (window.electronAPI?.openFolder) {
				const result = await window.electronAPI.openFolder(folderPath)
				if (!result.success) {
					alert('打开文件夹失败: ' + result.error)
				}
			} else {
				alert('系统API不可用')
			}
		} catch (error) {
			console.error('打开文件夹失败:', error)
			alert('打开文件夹失败: ' + error.message)
		}
	}

	const handleShowDeleteDialog = () => {
		if (!project.value) {
			alert('没有选中的项目')
			return
		}
		deleteDialogVisible.value = true
	}

	const handleCancelDelete = () => {
		deleteDialogVisible.value = false
		deleteLoading.value = false
	}

	const handleDeleteRemovedProject = async (projectPath) => {
		try {
			if (window.electronAPI?.deleteProject) {
				const result = await window.electronAPI.deleteProject(projectPath)
				if (result.success) {
					// 刷新项目列表
					await projectStore.loadRecentProjects()
					alert(result.message || '项目已从列表中移除')
				} else {
					alert('从列表中移除失败: ' + result.error)
				}
			} else {
				alert('系统API不可用')
			}
		} catch (error) {
			console.error('从列表中移除失败:', error)
			alert('从列表中移除失败: ' + error.message)
		}
	}

	const handleConfirmDelete = async () => {
		if (!project.value?.path) {
			alert('项目路径不存在')
			return
		}

		deleteLoading.value = true
		
		try {
			if (window.electronAPI?.deleteProject) {
				const result = await window.electronAPI.deleteProject(project.value.path)
				if (result.success) {
					// 删除成功，清除当前项目并刷新列表
					projectStore.setProject(null)
					await projectStore.loadRecentProjects()
					deleteDialogVisible.value = false
					alert(result.message || '项目删除成功')
				} else {
					alert('删除项目失败: ' + result.error)
				}
			} else {
				alert('系统API不可用')
			}
		} catch (error) {
			console.error('删除项目失败:', error)
			alert('删除项目失败: ' + error.message)
		} finally {
			deleteLoading.value = false
		}
	}

	// 初始化数据
	onMounted(async () => {
		// 加载最近项目列表
		try {
			await projectStore.loadRecentProjects()
		} catch (error) {
			console.error('加载最近项目失败:', error)
		}
		
		// 加载本地方法配置
		try {
			if (window.electronAPI?.getLocalMethods) {
				const result = await window.electronAPI.getLocalMethods()
				if (result.success && result.config) {
					// 设置数据源配置
					dataList.value = result.config.data_sources || []
					// 设置深度学习方法配置
					instanceList.value = result.config.methods || []
					
					// 默认选中第一个深度学习方法
					if (instanceList.value.length > 0) {
						form.value['instance'] = JSON.parse(JSON.stringify(instanceList.value[0]))
						console.log('[Dashboard] 默认选中方法:', form.value['instance'].title)
					}
					
					console.log('[Dashboard] 成功加载方法配置:', {
						dataSources: dataList.value.length,
						methods: instanceList.value.length
					})
				} else {
					console.warn('[Dashboard] 加载方法配置失败，使用默认配置')
				}
			}
		} catch (error) {
			console.error('加载方法配置失败:', error)
		}
	})
</script>

<style scoped lang="scss">
.container {
	.sidebar {
		display: flex;
		flex-direction: column;
		gap: 13px;
		padding: 23px 15px;
		.custom-btn{
			height: 40px;
			width: 100%;
			border-radius: 60px;
			border: 1px solid #2165F8;
			color: #2165F8;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: 500;
			cursor: pointer;
		}
		.sidebar-main{
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			gap: 15px;
			.custom-input{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 10px;
				padding-right: 10px;
				.input{
					width: 70%;
					font-size: 14px;
					color: #222;
					padding: 8px 15px;
					border: 0;
					outline: none;
					background: transparent;
				}
				.icon{
					cursor: pointer;
				}
			}
			.custom-input.border{
				border-radius: 8px;
				border: 1px solid #DCE5E6;
			}
			.main-cont{
				display: flex;
				flex-direction: column;
				background: linear-gradient( 180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.4) 100%);
				border-radius: 6px;
				border: 1px solid #DCE1E6;
				.info{
					display: flex;
					justify-content: flex-start;
					gap: 10px;
					position: relative;
					padding: 14px;
					border-bottom: 1px solid #DCE1E6;
					.info-circle{
						width: 35px;
						height: 35px;
						border-radius: 50%;
						background: var(--el-color-primary);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 18px;
						color: white;
						text-shadow: 0 1px 2px rgba(0,0,0,0.2);
					}
					.info-cont{
						display: flex;
						flex-direction: column;
						flex: 1;
						.title{
							font-size: 14px;
							color: #222;
						}
						.text{
							font-size: 12px;
							color: #606266;
						}
					}
					.more{
						position: absolute;
						right: 8px;
						top: 5px;
					}
				}
				.card-box{
					display: flex;
					flex-direction: column;
					padding: 14px 0 0;
					.custom-item{
						margin-bottom: 15px;
						padding: 0 14px;
						display: flex;
						flex-direction: column;
						gap: 3px;
						.label{
							font-size: 14px;
							color: #333;
						}
						.text{
							font-size: 12px;
							color: #606266;
							white-space: wrap;
							word-break: break-all;
						}
						.clickable-path{
							cursor: pointer;
							color: #409EFF;
							text-decoration: underline;
							transition: color 0.2s;
							&:hover{
								color: #66b1ff;
							}
						}
					}
				}
			}
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		.card-header{
			height: 40px;
			position: relative;
			font-size: 19px;
			font-weight: 600;
			color: #222;
		}
		.card-header::before{
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 25px;
			height: 3px;
			background: #2165F8;
			border-radius: 5px;
		}
		.cell-box{
			display: flex;
			flex-flow: wrap;
			gap: 20px;
			padding: 20px 0;
			.cell{
				border-radius: 10px;
				overflow: hidden;
				width: 150px;
				height: 190px;
				background: #fff;
				box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.06);
				display: flex;
				flex-direction: column;
				cursor: pointer;
				.cell-img{
					width: 150px;
					height: 150px;
					background: #e5e5e5;
					.img{
						width: 150px;
						height: 150px;
					}
				}
				.cell-title{
					font-size: 16px;
					color: #222;
					height: 40px;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.active{
				border: 2px solid #2165F8;
			}
			.removed{
				opacity: 0.6;
				.cell-img{
					background: #f5f5f5;
				}
				.cell-title{
					color: #999;
					font-style: italic;
				}
			}
			.removed-placeholder, .empty-placeholder{
				width: 150px;
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32px;
				background: #f5f5f5;
			}
			.removed-placeholder{
				background: #ffebee;
			}
		}
	}
}
.flex-column{
	display: flex;
	flex: 1;
	flex-direction: column;
}
.flex-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 1;
	.input{
		flex: 1;
	}
}
.card-cell-box{
	display: flex;
	flex-flow: nowrap;
	justify-content: flex-start;
	gap: 10px;
	line-height: 1.5;
	.cell-box{
		display: flex;
		flex-flow: wrap;
		gap: 10px;
		max-width: 478px;
		.cell{
			background: rgba(255,255,255,0.79);
			border-radius: 8px;
			border: 2px solid #DCE5E6;
			padding: 10px;
			box-sizing: border-box;
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 10px;
			width: 234px;
			height: 90px;
			cursor: pointer;
			.circle{
				width: 35px;
				height: 35px;
				border-radius: 50%;
				background: var(--el-color-primary);
			}
			.method-icon{
				width: 35px;
				height: 35px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18px;
				color: white;
				text-shadow: 0 1px 2px rgba(0,0,0,0.2);
			}
			.cell-cont{
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				gap: 10px;
				.c-title{
					font-size: 14px;
					color: #333;
					white-space: wrap;
					word-break: break-all;
				}
				.c-text{
					font-size: 12px;
					color: #606266;
					white-space: wrap;
					word-break: break-all;
				}
			}
		}
		.active{
			border: 2px solid var(--el-color-primary);
		}
		.custom-item{
			height: 60px;
		}
	}
	.cell-main{
		width: 424px;
		background: rgba(255,255,255,0.79);
		border-radius: 8px;
		border: 1px solid #DCE5E6;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 15px;
		.title{
			font-size: 14px;
			color: #333;
			display: flex;
			flex-direction: column;
			gap: 10px;
			white-space: wrap;
			word-break: break-all;
		}
		.text{
			font-size: 12px;
			color: #606266;
			white-space: wrap;
			word-break: break-all;
		}
	}
}



</style>